<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<%@ include file="/common/meta.jsp"%>

<script language="Javascript"  src="${ ctx}/scripts/htmlbox/htmlbox.colors.js" type="text/javascript"></script>
<script language="Javascript"  src="${ ctx}/scripts/htmlbox/htmlbox.styles.js" type="text/javascript"></script>
<script language="Javascript"  src="${ ctx}/scripts/htmlbox/htmlbox.syntax.js" type="text/javascript"></script>
<script language="Javascript"  src="${ ctx}/scripts/htmlbox/xhtml.js"  type="text/javascript"></script>
<script language="Javascript"  src="${ ctx}/scripts/htmlbox/htmlbox.min.js" type="text/javascript"></script>
<script language="Javascript"  src="${ ctx}/scripts/htmlbox/htmlbox.undoredomanager.js"  type="text/javascript"></script>

<style type="text/css">
.page-content {
	width: 1200px;
	margin: 0 auto;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	position: relative;
	padding-top: 20px;
}

#column-main {
   width: 710px;
   float: left;
   border-left: dotted 0px;
   padding-left: 10px;
   border-left: dotted 0px;
   
   padding-right: 20px;
   -moz-box-shadow: 0 10px 20px #b0b3b6;    /*我们在这里设置阴影，同时设置padding-right使得其偏向于右边，（注：需要设置boreder当然需要设置其宽度为0使其看不见）*/
   -webkit-box-shadow: 0 10px 20px #b0b3b6;
   box-shadow: 0 10px 20px #b0b3b6;
   vertical-align: middle;
}

#column-left {
	margin-right: 14px;
	padding-top: 0px;
	padding-left: 0px;
	padding-bottom: 50px;
	width: 160px;
	float: left;
	margin-left: 50px;
}

input.button {
	background-color: rgba(47, 167, 226, 0.66);
	border: 1px solid rgb(51, 157, 189);
	color: rgb(250, 250, 252);
	cursor: pointer;
	font-size: 1em;
	height: 23px;
	padding: 2px 5px;
	vertical-align: middle;
	margin-top: 4px;
	margin-right: 10px;
}
</style>


<script language="javascript">
	$(document).ready(
			function() {
				var htmlBox = $("#myHtmlBox").css("height", "300").css("width","700").css("padding","10px 2px").htmlbox(
						{
							toolbars : [
							[ "bold", "italic", "underline", "separator","justify", "left", "center", "right","separator", "link",
							  "unlink", "separator","image", "code", "highlight" ] ],
							skin : "blue"
						});
				$("#blog_type").change(function(){
					var type = $("#blog_type").val();
					$("#blog_after_div").html("");
					if(type=='public'){
						$("#blog_after_div").html("<input type='hidden' name='blog.ifPersonal' value='1'/>");
					}
					if(type=='private'){
						$("#blog_after_div").html("<strong>博客是否公开</strong><span style='color: red; margin-left: 5px; font-weight: bold'>*</span>"+
					 	 "<select name='blog.ifPersonal' id='blog_ifPersonal'>"+
					 	 "<option value='' selected>==选择是否公开==</option>"+
					 	 "<option value='1'>公开</option>"+
					 	 "<option value='0'>不公开</option></select>");
					}
				});
				
				
 			});
	function beforeSubmit(){
		 if($("#required").val()!=null&&$("#required").val()!=""&&$("#blog_ifPersonal option:selected").text()!=null&&$("#blog_ifPersonal option:selected").text()!="==选择是否公开==")
			 return true;
		 else{
			 $("#saveBlog").css("border","1px solid red");
			 return false;
		 }
	}
	

</script>

<title>新建博客</title>
</head>
<body>
<body id="page-home">
	<%@ include file="/common/header.jsp"%>
	<div class='page-content'>

		<div id='column-left'><%@ include file="/common/left.jsp"%></div>

		<div id="column-main">
			<form action="${ctx }/blog/blog.action"  method="post">
			<div style="margin-bottom: 3px;">
			<strong>博客名称</strong><span style="color: red; margin-left: 5px; font-weight: bold">*</span>
			<input id="required"   maxlength="80" name="blog.blogName" size="45"
			 style="width: 350px; border: 1px solid grey; height: 20px;" type="text" value="${blog.blogName}" /> 
			</div>
			<c:if test="${role!='manager'}">
			<input type="hidden" name="blog.type" value="private"/>
			<div  style="margin-bottom: 10px;">
			  <strong>博客是否公开</strong><span style="color: red; margin-left: 5px; font-weight: bold">*</span> 
	 	 <s:select name="blog.ifPersonal" list="#{0:'不公开',1:'公开'}"  theme="simple" id="blog_ifPersonal" 
	 	 value="#attr.blog.ifPersonal" headerKey="" headerValue="==选择是否公开=="/>
			 </div>
			</c:if>
			<c:if test="${role=='manager'}">
			<div  style="margin-bottom: 10px;" id="blog_type_choose">
			  <strong>博客的类型</strong><span style="color: red; margin-left: 5px; font-weight: bold">*</span> 
	 	 <s:select name="blog.type" list="#{'public':'公共博客','private':'私人博客'}"  theme="simple" id="blog_type"
			 value="#attr.blog.type" headerKey="" headerValue="==选择类型=="/>
	 	 	 <span id="blog_after_div"></span>
			 </div>
			</c:if>
		
		<!-- 文本编辑框 -->
			<textarea id='myHtmlBox' name="blog.description"></textarea>
			<input class="button" name="method:saveBlog" style="float:right;" type="submit" value="创建博客" id="saveBlog" onclick="return beforeSubmit();"></input>
			
			<br>
			<br>
			<br> 
			</form>
		</div>
	</div>

	<div style="clear: both;"></div>
	<%@ include file="/common/footer.jsp"%>

</body>
</html>